import React, { useEffect, useState, useCallback, useRef } from 'react';
import { connect } from 'dva';
import { Button, Table, Modal, Drawer, Popconfirm, message } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import AddRoleDrawer from './components/AddRoleDrawer';
import style from '@/pages/IndexPage.css';


function RoleManager({ dispatch, user, permission }) {
    let { currentMenu } = user;
    let { globalMenuList, roleList, checkedStatus, currentPage, total } = permission;
    let [info, setInfo] = useState({});
    let btnMaps = useRef({});
    useEffect(()=>{
        dispatch({ type:'permission/fetchRoleList'});
        dispatch({ type:'permission/fetchGlobalMenuList'});
    },[]);
    useEffect(()=>{
        if ( currentMenu.btns ) {
            currentMenu.btns.forEach(btn=>{
                btnMaps.current[btn.menuCode] = true;
            })
        }
    },[currentMenu])
    const columns = [
        { title: '权限名称', dataIndex:'roleName' },
        { title: '备注', dataIndex:'remark', render:value=>(<span>{ value || '--' }</span>) },
        { title: '创建时间', dataIndex:'createTime', render:value=>value.replace('T',' ') },
        {
            title: '操作',
            render: row => (
                <div>
                    <Button type='link' disabled={false} icon={<EditOutlined />} onClick={()=>setInfo({ visible:true, forEdit:true, current:row })}>操作</Button>
                    {
                        btnMaps.current['dele_role']
                        ?
                        <Popconfirm cancelText='取消' okText='确定' title={`确认删除${row.roleName}`} onConfirm={()=>{
                            new Promise((resolve, reject)=>{
                                dispatch({ type:'permission/delRoleAsync', payload:{ resolve, reject, roleId:row.roleId }})
                            })
                            .then(()=>{
                                message.success(`删除${row.roleName}成功`);
                            })
                            .catch(msg=>{
                                message.error(msg);
                            })
                        }}>
                            <Button type='text' danger icon={<DeleteOutlined />}>删除</Button>
    
                        </Popconfirm>
                        :
                        <Button type='text' disabled={true} danger icon={<DeleteOutlined />}>删除</Button>
                    }
                </div>
            )
        }
    ];
    return (
        <div className={style['page-container']}>
            <div style={{ height: '40px' }}>
                <Button type='primary'  disabled={!btnMaps.current['add_role']} icon={<PlusOutlined />} onClick={()=>setInfo({ visible:true })}>新建权限</Button>
            </div>
            <div style={{ height: 'calc( 100% - 40px)' }}>
                <div className={style['card-container']} style={{ boxShadow:'none' }}>
                    <Table
                        className={style['self-table-container']}
                        columns={columns}
                        dataSource={roleList}
                        rowKey="roleId"
                        locale={{
                            emptyText: <div style={{ margin: '1rem 0' }}>还没有配置任何权限</div>,
                        }}
                        pagination={{
                            current: currentPage,
                            total,
                            pageSize: 12,
                            showSizeChanger: false,
                        }}
                        onChange={(pagination) => {
                            dispatch({
                                type: 'mach/fetchMachList',
                                payload: { currentPage: pagination.current },
                            });
                        }}
                    />
                </div>
            </div>
            {/* 新增权限模态弹窗 */}
            <Drawer
                width="54%"
                open={info.visible ? true : false}
                className={style['custom-drawer']}
                onClose={() => setInfo({})}
                title={info.forEdit ? '更新权限' : '新建权限'}
            >
                <AddRoleDrawer 
                    info={info}
                    onClose={()=>setInfo({})}
                    onDispatch={action=>dispatch(action)}
                    globalMenuList={globalMenuList}
                    checkedStatus={checkedStatus}
                />
            </Drawer>
        </div>
    )
}

export default connect(({ user, permission })=>({ user, permission }))(RoleManager);